<template>
	<div>	
		<!-- 图例 -->
		<bi-legend :lang-type="langType" @legend-result="onLegend" :option="barOption.legend"></bi-legend>
        <!-- 直角坐标系 -->
		<bi-grid :lang-type="langType" @grid-result="onGrid" :option="barOption.grid"></bi-grid>
        <!-- x轴 -->
		<bi-axis :lang-type="langType" axis-name="X" axis-type="category" @axis-result="onXAxis" :option="barOption.xAxis"></bi-axis>
        <!-- y轴 -->
		<bi-axis :lang-type="langType" axis-name="Y" axis-type="value" @axis-result="onYAxis" :option="barOption.yAxis"></bi-axis>
        <!-- 区域缩放 -->
		<bi-data-zoom :lang-type="langType" @data-zoom-result="onDataZoom" :option="barOption.dataZoom"></bi-data-zoom>
	<!-- <bi-visual-map
			:lang-type="langType"
			@visual-map-result="onVisualMap"
			:option="barOption.visualMap"
		></bi-visual-map> -->
        <!-- 提示框 -->
		<bi-tool-tip :lang-type="langType" @tooltip-result="onToolTip" :option="barOption.tooltip"></bi-tool-tip>
        <!-- 系列选项 -->
		<bi-bar-series
			:lang-type="langType"
			@series-result="onSeries"
			:series-name="item.name"
			:option="barOption.series[idx]"
			v-for="(item,idx) in barOption.series"
			:key="idx"
		></bi-bar-series>
    <!-- 生成图表按钮 -->
		<div style="text-align:center">
			<md-button
				class="md-raised md-primary"
				@click="createChartOption"
			>{{getLangText(label.createChart)}}</md-button>
		</div>
	</div>
</template>
<script>
import Legend from "@/components/comp/Legend";
import Axis from "@/components/comp/Axis";
import DataZoom from "@/components/comp/DataZoom";
import VisualMap from "@/components/comp/VisualMap";
import ToolTip from "@/components/comp/ToolTip";
import BarSeries from "@/components/chart/BarSeries";
import Grid from "@/components/comp/Grid";
export default {
    name:"BarOption",
    props:{
        langType:{
            type:String,
            default:window.localStorage.getItem("langType")
        },
        option:{
            type:Object,
            default:function () {return {};  }
        }
    },
    components:{
        'bi-legend':Legend,
        'bi-axis':Axis,
        'bi-data-zoom':DataZoom,
        'bi-tool-tip':ToolTip,
        'bi-bar-series':BarSeries,
        'bi-grid':Grid,
        'bi-visual-map':VisualMap
    },
    data:()=>({
        label:{
             bgColor:{zh:"背景颜色",en:"BgColor"},
             visualMap: { zh: "开启视觉映射", en: "openVisualMap" },
             createChart: { zh: '生成图表', en: 'CREATE CHART' },
             yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" },
        },
        //是否显示
        isShow:false,
        //设置选项
        barOption:{           
            grid:[],
            legend:[],
            xAxis:[],
            yAxis:[],
            visualMap:null,
            dataZoom:[],
            series:[
                {}
            ]
        },
        // 颜色选择器
        // picker:{
        //     show:false
        // }
        
    }),
    watch:{
        option(){
            this.parseObj();
        },
        // barOption:{
        //     deep:true,
        //     handler(){
        //         this.createChartOption();
        //     }
        // }
        
    },
    methods:{       
        onLegend(op){
            this.barOption.legend=op;
        },
        onGrid(op){
            this.barOption.grid=op;
        },
        onXAxis(op){
            this.barOption.xAxis=op;
        },
        onYAxis(op){
            this.barOption.yAxis=op;
        },
        onDataZoom(op){
            this.barOption.dataZoom=op;
        },
        onVisualMap(op){
            this.barOption.visualMap=op;
        },
        onToolTip(op){
            this.barOption.tooltip=op;
        },
        onSeries(op){
            for(var i=0;i<this.barOption.series.length;i++){
                if(op.name==this.barOption.series[i].name){
                    this.barOption.series[i]=op;
                    break;
                }
            }
            
        },
        // showColorPicker(tag){
            
        //     this.picker.show=this.picker.show?false:true;
        // },
        // onColorPicker(op){
        //     this.barOption.backgroundColor=op.rgba;
        // },
        //解析option
        parseObj(){
            // this.doVisualMap();
            if(!this.option||JSON.stringify(this.option)=='{}')return;
            for(var key in this.option){
                this.barOption[key]=this.option[key];               
            }

        },
        //生成图表选项
        createChartOption(){
            var that=this;
             that.$emit("create-chart",that.barOption);
            // this.app.$emit('close-option');
            // setTimeout(function () { 
            //     that.$emit("create-chart",that.barOption);
            //  },1000)
       
        },
        
    },
    mounted(){
        this.parseObj();
    }
}
</script>
